<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>02 vue-class绑定</title>
        <style>
            .bg_red {
                width: 150px;
                height: 150px;
                margin: 10px 10px;
                padding: 10px 10px;
                background-color: red;
            }

            .bg_yellow {
                width: 150px;
                height: 150px;
                margin: 10px 10px;
                padding: 10px 10px;
                background-color: yellow;
            }

            .border_style {
                border-width: 5px;
                border-color: rgb(223, 9, 187);
                border-style: solid;
            }

            .font_style {
                font-family: '黑体';
                font-size: 25px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 动态绑定class--三目写法，注意写成:class后引号内将是js语法，:class等效于v-bind:class -->
            <button @click="handleClick1()">触发三目class</button>
            <div :class="isActive ? 'bg_red' : 'bg_yellow'">
                动态绑定class--三目写法
            </div>

            <!-- 动态绑定class--对象写法，注意写成:class后引号内将是js语法 -->
            <button @click="handleClick2()">触发对象class</button>
            <div :class="classObj">
                动态绑定class--对象写法
            </div>

            <!-- 动态绑定class--数组写法，注意写成:class后引号内将是js语法 -->
            <button @click="handleClick3()">触发数组class</button>
            <div :class="classArr">
                动态绑定class--数组写法
            </div>

            <hr />

            <p :style="'background:' + (isActive ? 'red' : 'yellow')">
                动态绑定style--三目写法
            </p>
            <p :style="styleObj">动态绑定style--对象写法</p>
            <p :style="styleArr">动态绑定style--数组写法</p>
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    isActive: true,
                    classObj: {
                        bg_yellow: true,
                        border_style: true
                    },
                    classArr: ['bg_yellow', 'border_style'],
                    styleObj: {
                        backgroundColor: 'yellow',
                        fontSize: '30px'
                    },
                    styleArr: [{ backgroundColor: 'blue' }]
                },
                methods: {
                    handleClick1() {
                        this.isActive = !this.isActive;
                    },
                    handleClick2() {
                        if (vm.classObj.border_style) {
                            vm.classObj.border_style = false;
                            vm.classObj.font_style = true;
                        } else {
                            vm.classObj.border_style = true;
                            vm.classObj.font_style = false;
                        }
                    },
                    handleClick3() {
                        if (vm.classArr[1] === 'border_style') {
                            vm.classArr.pop();
                        } else {
                            vm.classArr.push('border_style');
                        }
                    }
                }
            });
        </script>
    </body>
</html>
